<template>
  <div class="hot-wrapper" :style="{'background-image':bg}">
    <div class="hot-content">
      <topic-header name="热门推荐" en-name="Popular recommendations" @change="changeIndex" @more="toList" :active-index="activeIndex" :show-more="showMore" :length="computedLength"></topic-header>
      <div class="hot-item-wrapper">
        <div class="hot-item" v-for="(item,index) in hotList" :key="item.goodsId">
          <div>
            <div class="hot-item-content">
              <img :src="item.thumbnail"/>
              <div class="hot-item-content-right">
                <div class="issjrz" v-if="item.authOrganFullName == '深圳数据交易所' && item.isShowFlag">
                  <a-tooltip :title="'经' + item.authOrganFullName + '合规评估'">
                    <img src="../../../assets/z.png"/>
                  </a-tooltip>
                </div>
                <div class="hot-item-name" :style="{color: item.isPublic || '#aaa'}" @click="toDetail(item.goodsId)">
                  <!-- <a-tooltip :title='item.goodsName'>{{ item.goodsName }}</a-tooltip> -->
                {{ item.goodsName }}
                </div>
                <div class="hot-item-supplier" v-if="item.supplierName">
                  {{ item.supplierName }}
                </div>
                <div class="hot-item-content-bottom">
                  <div class="itemprice" :class="{itemflex: item.chargeType == 3}" v-if="item.activityDesc">
                    <span style="line-height: 20px;">{{ item.activityDesc  }}</span>
                    <!-- <span class="unit">{{ item.chargeType === 1 ? item.unit : '' }}</span> -->
                    <div class="through">
                      {{ item.chargeType == 3 ? '面议' : ('¥' + (item.chargeType == 1 ? item.price : 0)) }}
                      {{ (item.chargeType === 1 ? item.unit : '') }}
                    </div>
                  </div>
                  <div class="hot-item-price" v-else>
                    <div style="line-height: 20px;" v-if="item.chargeType!==3">
                      ¥{{ item.chargeType === 1 ? item.price : 0 }}
                    </div>
                    <div style="line-height: 20px;" v-else>
                      面议
                    </div>
                    <span class="hot-item-unit">{{ item.chargeType === 1 ? item.unit : '' }}</span>
                  </div>
                  <rate-star :rate="item.goodsRate" show-bg></rate-star>
                </div>
                <!-- <div style="color: #aaa; font-size: 9px;" v-if="item.authOrganFullName && item.authOrganFullName != '深圳数据交易所'">{{item.authOrganFullName}}认证</div> -->
              </div>
            </div>
            <div class="hot-item-desc more-t"> {{ item.goodsDesc }} </div>
          </div>
          <div class="hot-item-bottom">
            <div class="hot-item-type">
              <svg-icon icon-class="data_type" size="14" style="margin-right: 3px;"></svg-icon>
              应用行业：
              <span class="hot-item-type-content">{{ item.applicationIndustry }}</span>
            </div>
            <div class="hot-item-type">
              <svg-icon icon-class="data_scene" size="14" style="margin-right: 3px;"></svg-icon>
              应用场景：
              <span class="hot-item-type-content">{{ item.applicationScenario }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TopicHeader from './TopicHeader'
import {qryHotGoodsList} from '@/api/portal'
import RateStar from '../../../components/RateStar'

export default {
  name: 'Hot',
  props:{
    showMore:{
      type: Boolean,
      default: true
    },
    supid:{
      type: [String,Number],
      default: ''
    }
  },
  components: {
    RateStar,
    TopicHeader
  },
  data () {
    return {
      hotList: [],
      activeIndex: 0,
      params: {
        page: 1,
        limit: 3
      },
      bg: 'url(' + require('../../../assets/images/portal/hot_bg.png') + ')',
      computedLength: 1
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    loadData () {
      
      qryHotGoodsList({...this.params,supplierId: this.supid, isShop: !!this.supid}).then(res => {
        if (res.code === 0) {
          this.hotList = res.data.records
          this.computedLength = Number(res.data.pages) || 1
          if(this.hotList.length == 0)this.$emit('nohot')
        }
      })
    },
    changeIndex (index) {
      if (index === this.activeIndex) return
      this.activeIndex = index
      this.params.page = this.activeIndex + 1
      this.loadData()
    },
    toDetail (id) {
      this.$router.push({
        path: '/goodsDetail',
        query: {id}
      })
    },
    toList () {
      this.$router.push({
        path: '/goodsList',
        query: {
          hot: true
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor: #3370FF;
.hot-wrapper {
  width: 100%;
  background-position: top;
  height: 370px;
  background-size: cover;
  display: flex;
  justify-content: center;
}

.hot-content {
  width: 1200px;
  padding-top: 40px;
}

.hot-item-wrapper {
  margin-top: 20px;
  display: flex;
  align-items: center;

  .hot-item {
    height: 240px;
    width: calc((100% - 40px) / 3);
    margin-left: 20px;
    border: 1px solid #e2e2e2;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform .1s;

    &:hover {
      border-color: transparent;
      transform: translateY(-2px);
      box-shadow: 0 0 10px 0 rgba(#0078FE, 0.1);
    }

    &:first-child {
      margin-left: 0;
    }

    .hot-item-content {
      display: flex;
      align-items: center;
      padding-bottom: 20px;
      margin-bottom: 20px;
      height: 100px;
      border-bottom: 1px dotted #E2E2E2;

      img {
        width: 80px;
        height: 80px;
      }

      .hot-item-content-right {
        // flex: 1;
        // width: 0;
        margin-left: 16px;
        height: 80px;
        position: relative;
        width: 100%;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        // width: calc(100% - 14px);
        .issjrz{
          position: absolute;
          top: -4px;
          right: -4px;
          img{
            height: 24px;
            width: 24px;
          }
        }
        .hot-item-name {
          width: 90%;
          overflow: hidden;
          font-size: 14px;
          cursor: pointer;
          line-height: 14px;
          font-family: PingFangSC-Medium, PingFang SC, sans-serif;
          font-weight: 500;
          white-space: nowrap;
          text-overflow: ellipsis;
          color: #323232;
          margin-bottom: 6px;
          &:hover {
            color: $mainColor;
          }
        }

        .hot-item-supplier {
          font-size: 12px;
          line-height: 12px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          color: $mainColor;
          padding: 5px 10px;
          border-radius: 2px;
          border: 1px solid #CCE4FE;
          width: fit-content;
          max-width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .hot-item-content-bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 5px 0;
          .through{
            text-decoration: line-through;
            color: #999;
            font-size: 12px;
            margin-left: 4px;
          }
          .itemflex{
            white-space:nowrap;
            display: flex;
            align-items: self-end;
          }
          .itemprice{
            font-size: 20px;
            color: #E03437;
            font-weight: 500;
            .unit{
              font-size: 12px;
              font-weight: 400;
              color: #909090;
              margin-left: 6px;
            }
          }
          .hot-item-price {
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC, sans-serif;
            font-weight: 500;
            color: #E03437;
            display: flex;
            align-items: flex-end;

            .hot-item-unit {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              font-weight: 400;
              color: #909090;
              margin-left: 6px;
            }
          }
        }
      }
    }

    .hot-item-desc {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #646464;
      line-height: 15px;
    }

    .hot-item-bottom {
      display: flex;
      align-items: flex-start;

      .hot-item-type {
        flex: 1;
        width: 0;
        display: flex;
        align-items: flex-start;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #646464;
        line-height: 14px;

        &:last-child {
          margin-left: 5px;
        }

        .hot-item-type-content {
          color: #323232;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
